<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css">
</head>
<body>
    <div id="app">
        <king></king>
    </div>


    <template id="king">
        <div>
          <p>我是国王~~</p>
          <p>国库：{{gk}}</p>
          <p>下面是我的子民们..</p>
          <hr>
          <pi :_give="addMoney"></pi>
        </div>
    </template>


    <template id="pi">
        <div>
           <p>我是伟大国王的子民</p>
           <input type="number" v-model="money">
           <p><button @click="jg">进贡</button></p>
        </div>
    </template>

</body>
<script src="./base/vue.js"></script>

<script>

    Vue.component("king",{
        template:"#king",
        methods:{
            addMoney(money){
                this.gk += money; //king自己更改gk的数据  
            }
        },
        data(){
            return {
                gk:0
            }
        }
    })
    Vue.component("pi",{
        template:"#pi",
        props:["_give"],
        data(){
            return {
                money:100
            }
        },
        methods:{
            jg(){
                this.money /= 2;
                //执行进贡方法了
                this._give(this.money)
            }
        }
    })

    new Vue({
        el:"#app"
    })


</script>
</html>